<template>
  <div>
    <el-form :model="shopForm" :rules="rules" @submit.native.prevent="onSubmit('shopForm',$event)" ref="shopForm" label-width="140px" style="width:460px">
      <el-form-item label="所属市场：" prop="marketId">
        <el-select v-model="shopForm.marketId" placeholder="请选择市场" :disabled="readStatus">
          <el-option v-for="(item,index) in store.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺名称：" prop="shopName">
        <el-input v-model="shopForm.shopName" :disabled="readStatus" placeholder="请输入店铺名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="店铺电话：" prop="shopMobile">
        <el-input v-model="shopForm.shopMobile" :disabled="readStatus" placeholder="请输入店铺电话" clearable></el-input>
      </el-form-item>
      <el-form-item label="店铺地址：" prop="shopAddress">
        <el-input v-model="shopForm.shopAddress" :disabled="readStatus" placeholder="请输入店铺地址" clearable></el-input>
      </el-form-item>
      <el-form-item label="法人电话：" prop="shopLegalMobile">
        <el-input v-model="shopForm.shopLegalMobile" :disabled="readStatus" placeholder="请输入法人电话" clearable></el-input>
      </el-form-item>
      <el-form-item label="法人代表姓名：" prop="shopLegalName">
        <el-input v-model="shopForm.shopLegalName" :disabled="readStatus" placeholder="请输入法人代表姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="法人身份证：" prop="shopLegalNo">
        <el-input v-model="shopForm.shopLegalNo" :disabled="readStatus" placeholder="请输入法人身份证" clearable></el-input>
      </el-form-item>
      <el-form-item label="负责人电话：" prop="userMobile">
        <el-input v-model="shopForm.userMobile" @change="checkMobile" placeholder="请输入负责人电话" :disabled="readStatus"></el-input>
      </el-form-item>
      <el-form-item label="负责人姓名：" prop="userName">
        <el-input v-model="shopForm.userName" :disabled="readStatus" placeholder="请输入负责人姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="负责人身份证：" prop="userNo">
        <el-input v-model="shopForm.userNo" :disabled="readStatus" placeholder="请输入负责人身份证" clearable></el-input>
      </el-form-item>
      <el-form-item label="是否缴纳保证金：">
        <el-radio-group  v-model="shopForm.shopAuctionState" :disabled="readStatus">
          <el-radio  :label="1">是</el-radio>
          <el-radio  :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上传LOGO">
        <el-upload
          :disabled="status==1"
          name="file"
          action="uploadUrl"
          list-type="picture-card"
          accept="image/*"
          :on-preview="handlePictureCardPreview"
          :before-upload="beforeAvatarUpload"
          :on-change="getFile"
          :on-remove="handleRemove"
          :auto-upload="false"
          :file-list="fileList"
          :show-file-list="false"
        >
          <i class="el-icon-plus"></i>
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
        </el-upload>
      </el-form-item>
      <el-form-item v-show="!readStatus">
        <button type="submit" class="el-button el-button--primary">{{buttonName}}</button>
        <!-- <button type="submit" class="el-button el-button--primary">{{buttonName}}</button> -->
        <el-button @click="turnToList">返回列表</el-button>
        <el-button @click="resetForm('shopForm')" v-if="!shopId">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        num:0,
        fileList: [],
        imageUrl:'',
        uploadUrl: '#',
        buttonName:'',
        shopId: this.$route.params.id,
        shopForm:{
          shopName: '',
          shopMobile: '',
          shopAddress: '',
          userMobile: '',
          userName: '',
          userNo:'',
          shopLegalMobile:'',
          shopLegalName:'',
          shopLegalNo:'',
          marketId: '',
          userState: 1,
          userType: 40,
          shopState: 1,
          shopAuctionState: 0
        },
        store:{
          marketOptions:[],
          params:{
            pageSize:10,
            pageIndex:1,
            marketId:this.$marketId,
          },
        },
        rules: {
          marketId: [
             { required: true, message: '请选择市场', trigger: 'blur' },
          ],
          shopName: [
            { required: true, message: '请输入店铺名称', trigger: 'blur' },
            { max: 20, message: '最多20个字符', trigger: 'blur' }
          ],
          shopMobile: [
            { required: true, message: '请输入店铺电话', trigger: 'change' }
          ],
          shopLegalMobile: [
            { required: true, message: '请输入法人电话', trigger: 'blur' },
            { min: 11 , max: 11, message: '必须11位', trigger: 'blur' }
          ],
          shopLegalName: [
            { required: true, message: '请输入法人姓名', trigger: 'blur' },
          ],
          userMobile: [
            { required: true, message: '请输入法人电话', trigger: 'blur' },
            { min: 11 , max: 11, message: '必须11位', trigger: 'blur' }
          ],
          userName: [
            { required: true, message: '请输入法人姓名', trigger: 'blur' },
          ]
        },
        readStatus:false,
      };
    },
    computed:{
      routeQuery(){
        return this.$route.query
      },
      status(){
        return this.$route.query.status;
      }
    },
    watch: {
      'shopForm.shopLegalMobile':function(){
        this.shopForm.userMobile = this.shopForm.shopLegalMobile
      },
      'shopForm.shopLegalName':function(){
        this.shopForm.userName = this.shopForm.shopLegalName
      },
      'shopForm.shopLegalNo':function(){
        this.shopForm.userNo = this.shopForm.shopLegalNo
      },
      'routeQuery'(){
        this.resetStatus()
      }
    },
    created(){
      this.$store.commit('getMarketOptions',this.store);
      this.resetStatus()
    },
    methods: {
      handlePictureCardPreview(){

      },
      handleRemove(){

      },
      getFile(file,fileList){
        if(fileList.length>1){
          fileList.splice(0,1)
        }
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 /1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      assignFn(shopEditForm,userEditForm){
        this.num ++
        if(this.num==2){
          Object.assign(this.shopForm,shopEditForm,userEditForm)
        }
      },
      getData(){
        let  shopEditForm = {}
        let  userEditForm = {}
        this.$axios.get(this.$api.getShopList,
          { params: {shopId: this.shopId}}).then((res) => {
          shopEditForm = res.data.result[0]
          delete  shopEditForm.shopCreateTime;
          delete  shopEditForm.shopUpdateTime;
          delete  shopEditForm.market;
          this.assignFn(shopEditForm,userEditForm)
        })
        this.$axios.get(this.$api.getUserList,
          { params: {shopId: this.shopId, userType: 40}}).then((res) => {
          userEditForm = res.data.result[0]
          delete  userEditForm.userCreateTime;
          delete  userEditForm.userUpdateTime;
          delete  userEditForm.shop;
          delete  userEditForm.market;
          this.assignFn(shopEditForm,userEditForm)
        })
      },
      turnToList(){
        this.$router.push('/shop/shopList')
      },
      checkMobile(){
        this.$axios.get(this.$api.selectUserByMobile,{params: {userMobile: this.shopForm.userMobile}})
          .then((res)=>{
            if (res.data.code !=1){
              this.$message({
                message: res.data.msg,
                type: 'error'
              });
              this.shopForm.userMobile = ''
            }
          })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.fileList=[];
        this.imageUrl = ''
      },
      onSubmit(formName,$event) {
        this.$refs[formName].validate((valid) => {
          if(valid){
            var requestParam = this.shopForm
            var formData = new FormData($event.target);
            for(let i in requestParam){
              formData.append(i,requestParam[i])
            }
            this.$axios({
              method: 'post',
              url: this.$api.insertOrUpdateShop,
              data: formData
            }).then((res) => {
              if (res.data.code == 1){
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                this.$router.push('/shop/shopList')
              }else{
                this.$message({
                  message: res.data.msg,
                  type: 'error'
                });
                this.$router.push('/shop/shopForm')
              }
            })
          }else{
            this.$message({
              message: '提交有问题请查看',
              type: 'error'
            });
            return false;
          }
        });
      },
      resetStatus(){
        if(this.routeQuery.status){
          this.readStatus = true;
        }else{
          this.readStatus = false;
          if(!this.$route.params.id){
            for(var i in this.shopForm){
              if(i=='userState'||i=='userType'||i=='shopState'||i=='shopAuctionState'){
                continue
              }else{
                this.shopForm[i] = ''
              }
            }
          }
        }
      }
    },
    activated() {
      this.num = 0;
      this.shopId = this.$route.params.id;
      if (this.shopId != null){
        this.getData(this.shopId);
        this.buttonName = "立即更新"
      }else{
        this.buttonName = "立即创建"
      }
    },
    deactivated() {

    }
  }
</script>
<style>
  .avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 148px;
    height: 148px;
    display: block;
  }
</style>
